

<template>
   <div id="addPicturePage">
     <h2 style="margin-bottom: 16px">
       {{route.query?.id? "修改图片":"创建图片"}}
       </h2>
<!--     图片上传组件-->
<!--     <picture-upload :picture="picture" :onSuccess="onSuccess"></picture-upload>-->
     <!-- 选择上传方式 -->
     <a-tabs v-model:activeKey="uploadType"
     >
       <a-tab-pane key="file" tab="文件上传">
         <PictureUpload :picture="picture" :spaceId="spaceId"  :onSuccess="onSuccess" />
       </a-tab-pane>
       <a-tab-pane key="url" tab="URL 上传" force-render>
         <UrlPictureUpload :picture="picture" :spaceId="spaceId" :onSuccess="onSuccess" />
       </a-tab-pane>
     </a-tabs>

     <!--     图片信息表单-->
     <a-form
       layout="vertical"
       :model="pictureForm"
       @finish="handleSubmit"
     >
       <a-form-item
         name="name"
         label="名称"
         :rules="[{ required: true, message: '名称必填', trigger: 'blur' }]"
       >
         <a-input v-model:value="pictureForm.name" placeholder="请输入名称" allow-clear />
       </a-form-item>

       <a-form-item
         label="备注"
         name="introduction"
       >
         <a-textarea v-model:value="pictureForm.introduction"  placeholder="请输入备注" />
       </a-form-item>

       <a-form-item label="分类" name="category">
         <a-auto-complete  v-model:value="pictureForm.category" placeholder="请输入分类" :options="categoryOptions" allow-clear>

         </a-auto-complete>
       </a-form-item>

       <a-form-item label="标签" name="tags">
         <a-select v-model:value="pictureForm.tags" mode="tags" placeholder="请输入标签" :options="tagOptions" allow-clear>

         </a-select>
       </a-form-item>
       <a-button type="primary" html-type="submit" style="width: 100%">创建</a-button>
     </a-form>
   </div>
</template>

<script setup lang="ts">

import PictureUpload from '@/components/PictureUpload.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import {
  editPictureUsingPost, getPictureByIdUsingGet,
  listPictureTagCategoryUsingGet

} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import UrlPictureUpload from '@/components/UrlPictureUpload.vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'


const  picture = ref<API.PictureVO>()

const pictureForm = reactive<API.PictureVO>({

});
const uploadType = ref<'file' | 'url'>('file')

const userLogin = useLoginUserStore();

// 空间 id
const spaceId = computed(() => {
  console.log(route.query?.spaceId)
  return route.query?.spaceId
})

/**
 * 上传成功
 * @param newPicture
 */
const onSuccess = (newPicture: API.PictureVO) =>{
  picture.value = newPicture
  pictureForm.name = newPicture.name
}

const router = useRouter()
/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  const  pictureId = picture.value?.id
  if (!pictureId) return
  const res = await editPictureUsingPost({
    id: pictureId,
    spaceId: route.query?.spaceId,
    ...values
  })
  if (res.data.code ===0 && res.data.data ){
    message.success("创建成功")
    router.push( {
      path: `/picture/${pictureId}`,
    })
  }else {
    message.error("创建失败" + res.data.message)
  }


};
const  tagOptions = ref<string[]>([])
const  categoryOptions = ref<string[]>([])
/**
 * 获取下拉列表的数据
 */
const  getTagCategoryOptions = async () => {
    const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data ) {
    tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => {
       return {
         label: data,
         value: data
       }
    })
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => {
      return {
        label: data,
        value: data
      }
    })
  }

}
onMounted(()=>{
  getTagCategoryOptions()
})
const route = useRoute()


// 根据id 获取原数据
const  getOldPicture = async () => {
  const id = route.query?.id
  if (id) {
    const res = await getPictureByIdUsingGet({
      id
    })
    if (res.data.code === 0 && res.data.data ) {
      const  data = res.data.data
         picture.value = data,
         pictureForm.name = data.name,
         pictureForm.introduction = data.introduction
         pictureForm.category  =data.category
         pictureForm.tags = data.tags
    }
  }

}
onMounted(()=>{
  getOldPicture()
})
</script>

<style scoped>
  #addPicturePage {
    max-width: 720px;
    margin: 0 auto;
  }

</style>
